<template>
  <!-- 模板中 ref 数据不能加 .value，因为它内部会自动加 .value，解包 -->
  <p>{{ name }}</p>
  <!-- Vue3 不必只有一个根，这种特性在 Vue3 中叫 Fragment -->
  <button @click="updateName">update name</button>
</template>
<script>
import { ref } from 'vue'

export default {
  setup() {
    // ref 可以把任意数据包装为响应式的【对象】
    const name = ref('aaa')
    const updateName = () => {
      // JS 中修改，要加 .value
      name.value = 'xxx'
    }
    return {
      name,
      updateName,
    }
  },
}
</script>
